<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            line-height: 1.6;
            color: #333;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .logo {
            font-size: 2.5rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            letter-spacing: -1px;
        }
        
        .subtitle {
            font-size: 1rem;
            color: #6c757d;
            margin-bottom: 30px;
        }
        
        .status-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.08);
            padding: 40px;
            text-align: center;
            width: 100%;
            max-width: 500px;
            margin-bottom: 30px;
            border: 1px solid #e9ecef;
        }
        
        .status-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }
        
        .status-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .status-message {
            color: #6c757d;
            font-size: 1rem;
            margin-bottom: 30px;
            line-height: 1.5;
        }
        
        .actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.2s ease;
            min-width: 120px;
        }
        
        .btn-primary {
            background: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
            transform: translateY(-1px);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
            transform: translateY(-1px);
        }
        
        .btn-outline {
            background: transparent;
            color: #007bff;
            border: 2px solid #007bff;
        }
        
        .btn-outline:hover {
            background: #007bff;
            color: white;
        }
        
        .system-info {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 20px rgba(0,0,0,0.08);
            padding: 30px;
            width: 100%;
            max-width: 500px;
            border: 1px solid #e9ecef;
        }
        
        .info-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .info-icon {
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }
        
        .info-item {
            text-align: center;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }
        
        .info-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: #28a745;
            margin-bottom: 5px;
        }
        
        .info-label {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .footer {
            text-align: center;
            margin-top: auto;
            padding-top: 30px;
        }
        
        .copyright {
            font-size: 0.8rem;
            color: #adb5bd;
        }
        
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.3s ease;
        }
        
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px 15px;
            }
            
            .logo {
                font-size: 2rem;
            }
            
            .status-card,
            .system-info {
                padding: 30px 20px;
            }
            
            .actions {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 200px;
            }
            
            .info-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 页面标题 -->
            <div class="header">
                <h1 class="logo">V3系统</h1>
                <p class="subtitle">系统管理控制台</p>
            </div>
            
            <!-- 主要状态卡片 -->
            <div class="status-card">
                <div class="status-icon">✓</div>
                <h2 class="status-title">系统运行正常</h2>
                <p class="status-message">所有服务正常运行，系统状态良好</p>
                
                <div class="actions">
                    <a href="/" class="btn btn-primary">返回首页</a>
                    <button class="btn btn-outline" @click="refreshStatus">刷新状态</button>
                </div>
            </div>
            
            <!-- 页脚 -->
            <div class="footer">
                <p class="copyright">© 2024 V3系统管理平台</p>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref, onMounted } = Vue;

        createApp({
            setup() {
                const systemInfo = ref({
                    uptime: '2天',
                    version: 'v1.0.0',
                    services: '3',
                    users: '12'
                });

                const refreshStatus = () => {
                    // 模拟刷新
                    console.log('刷新系统状态...');
                    
                    // 更新运行时间（示例）
                    const uptimes = ['1天', '2天', '3天', '5天', '7天'];
                    systemInfo.value.uptime = uptimes[Math.floor(Math.random() * uptimes.length)];
                    
                    // 更新在线用户数（示例）
                    systemInfo.value.users = Math.floor(Math.random() * 50 + 10).toString();
                };

                onMounted(() => {
                    console.log('V3系统控制台已加载');
                });

                return {
                    systemInfo,
                    refreshStatus
                };
            }
        }).mount('#app');
    </script>
</body>
</html>